<template>
  <div>
    <!--     <Select
      v-if="$store.state.superAdmin == 'true'"
      v-model="museumId"
      placeholder="请选择博物馆"
      filterable
      @on-change="change"
    >
      <template v-for="item in museumList">
        <Option :value="item.id">{{item.name}}</Option>
      </template>
    </Select> -->

    <card style="margin-bottom: 10px" v-if="$store.state.superAdmin == 'true'">
      <el-select
        style="width: 100%"
        v-model="museumId"
        @change="change"
        filterable
        placeholder="请选择博物馆"
      >
        <el-option
          v-for="item in museumList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </card>

    <Card style="margin: 10px 0 20px 0">
      <Spin fix size="large" v-if="spinShow"></Spin>
      <p slot="title">预约人数和核销人数</p>
      <a href="#" slot="extra" style="color: #19be6b !important"
        >最近一次同步时间：{{ update }}</a
      >
      <div style="display: flex; justify-content: space-between">
        <div style="display: flex; align-items: center">
          <DatePicker
            :options="optionsDate"
            :clearable="clearable"
            :value="time"
            @on-change="onChangeTime"
            type="date"
            placeholder="请选择日期"
          ></DatePicker>
          <!-- <Select
            style="width: 200px; margin-left: 10px"
            v-model="timeRange"
            placeholder="请选择到馆时间"
            filterable
            @on-change="change2"
          >
            <template v-for="item in timeRangeList">
              <Option :value="item">{{ item }}</Option>
            </template>
          </Select> -->


  <el-select
              style="width: 200px; margin-left: 10px"
              v-model="timeRange"
              @change="change2"
              clearable
              placeholder="请选择到馆时间"
            >
              <el-option
                v-for="item in timeRangeList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>

        </div><div style="display:flex">
        <p style="margin-right:100px;font-size:120%">当前在馆人数&nbsp;&nbsp;<span style="color:red">{{staynum}}</span></p>
        <p>1分钟刷新一次</p></div>
      </div>
      <div
        id="echarts"
        class="echarts"
        :style="{ width: screenWidth - width + 'px' }"
      ></div>
      <Table
        class="table"
        highlight-row
        :columns="columns"
        :data="data"
      ></Table>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // loading:true,
      spinShow: false,
      screenWidth: document.body.clientWidth,
      width: 320,
      clearable: false,
      museumId: "",
      timeRange: "全天",
      timeRangeList: [],
      museumList: [],
      time: "",
      setInter: null,
      update: "",
      checkNum: "",
      totalNum: "",
staynum:0,
      columns: [
        { title: "预约人数", key: "num1", align: "center", minWidth: 200 },
        { title: "核销人数", key: "num2", align: "center", minWidth: 200 },
      ],
      data: [],

      optionsDate: {
        shortcuts: [
          {
            text: "今天",
            value() {
              return new Date();
            },
            onClick: (picker) => {
              this.$Message.info("选择了今天的数据");
            },
          },
          {
            text: "昨天",
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              return date;
            },
            onClick: (picker) => {
              this.$Message.info("选择了昨天的数据");
            },
          },
          {
            text: "前天",
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
              return date;
            },
            onClick: (picker) => {
              this.$Message.info("选择了前天的数据");
            },
          },
          {
            text: "7天前",
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              return date;
            },
            onClick: (picker) => {
              this.$Message.info("昨天了7天前的数据");
            },
          },
          {
            text: "30天前",
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
              return date;
            },
            onClick: (picker) => {
              this.$Message.info("选择了30天前的数据");
            },
          },
        ],
      },
    };
  },
  created() {
    if (this.$store.state.superAdmin == "true") {
      this.getmuseumList();
    } else {
      if (this.$store.state.museums.length > 1) {
        this.museumId = this.$store.state.museumId;
     
      } else {
        this.museumId = "";
      }
      this.getTimeRangeList();
         this.getCurrentStayNum()
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  watch: {
    screenWidth(val) {
      let that = this;
      setTimeout(function () {
        var myChart = that.echarts.init(document.getElementById("echarts"));
        myChart.resize();
      }, 300);
    },
    "$store.state.isCollapse"(val) {
      if (val) {
        this.width = 130;
      } else {
        this.width = 320;
      }
      let that = this;
      setTimeout(function () {
        var myChart = that.echarts.init(document.getElementById("echarts"));
        myChart.resize();
      }, 300);
    },
  },
  beforeDestroy() {
    clearInterval(this.setInter);
  },
  methods: {
    getmuseumList() {
      this.spinShow = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", (res) => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 50) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 50) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          this.getTimeRangeList();
          this.getCurrentStayNum()
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    getCurrentStayNum(){
        this.$http(
        "/stage/passengerFlow/getCurrentStayNum",
        {
          museumId: this.museumId,
        },
        "post",
        (res) => {
          console.log(res);
          if (res.data.code == 200) {
           this.staynum=res.data.data
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    getTimeRangeList() {
      // this.$http(
      //   "/stage/reservation/getReservationConfig",
      //   {
      //     museumId: this.museumId
      //   },
      //   "get",
      //   res => {
      //     if (res.data.code == 200) {
      //       this.timeRangeList = ["全天"];
      //       this.timeRangeList = this.timeRangeList.concat(
      //         res.data.data.arrivalPavilions
      //       );
      //       this.getDay();
      //     } else {
      //       this.$Message.error(res.data.msg);
      //     }
      //   }
      // );
      this.$http(
        "/stage/reservation/getReservationMuseumArrivalRangeDropdown",
        {
          museumId: this.museumId,
        },
        "get",
        (res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.timeRangeList = ["全天"];
            var times = [];
            for (var i = 0; i < res.data.data.length; i++) {
              times.push(res.data.data[i].timeRange);
            }
            console.log(times)
            this.timeRangeList = this.timeRangeList.concat(times);
            this.getDay();
          } else {
            // this.$Message.error(res.data.msg);
            this.getDay();
          }
        }
      );
    },
    onChangeTime(e) {
      this.time = e;
      this.getAppointmentTotalNum();
      this.getCurrentStayNum()
    },
    change() {
      this.getAppointmentTotalNum();
      this.getTimeRangeList();
        this.getCurrentStayNum()
    },
    change2() {
      this.getAppointmentTotalNum();
      // this.getTimeRangeList()
        this.getCurrentStayNum()
    },
    // 得到默认时间
    getDay() {
      this.time = this.getTime(new Date());
      this.getAppointmentTotalNum();
        this.getCurrentStayNum()
      let that = this;
      this.setInter = setInterval(function () {
        that.getAppointmentTotalNum();
          that.getCurrentStayNum()
      }, 60000);
    },

    // 获取预约人数和核销人数
    getAppointmentTotalNum() {
      this.spinShow = true;
      let timeRange = "";
      if (this.timeRange == "全天") {
        timeRange = "";
      } else if (this.timeRange == "上午") {
        timeRange = "am";
      } else if (this.timeRange == "下午") {
        timeRange = "pm";
      } else {
        timeRange = this.timeRange;
      }
      this.$http(
        "/stage/reservation/getAppointmentTotalNum",
        {
          museumId: this.museumId,
          date: this.time,
          timeRange: timeRange,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            this.data = [
              {
                num1: res.data.data.totalNum + "人",
                num2: res.data.data.checkNum + "人",
              },
            ];
            this.draw(res.data.data.totalNum, res.data.data.checkNum);
            this.update = this.getTime2(new Date());
          } else {
            this.$Message.error(res.data.msg);
          }
          this.spinShow = false;
        }
      );
    },
    draw(totalNum, checkNum) {
      let dom = document.getElementById("echarts");
      let myChart = this.echarts.init(dom);
      let num = 0;
      if (totalNum != 0) {
        num = ((checkNum / totalNum) * 100).toFixed(2);
      }
      myChart.setOption({
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "核销人数",
            type: "gauge",
            detail: { formatter: "{value}%" },
            data: [{ value: num, name: "核销率" }],
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.echarts {
  height: 400px;
}
</style>